<template>
	<div>
		<el-row>
			<el-col :span="1" class="labelCol">
				<p class="labelText">分类:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="selectvalue"
				           size="small"
				           placeholder="请选择">
					<el-option v-for="item in options"
					           :key="item.value"
					           :label="item.label"
					           :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">编码名称:</p>
			</el-col>
			<el-col :span="3">
				<el-input v-model="inputsearch"
				          size="small"
				          placeholder="请输入内容"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary"
				           size="small"
				           @click="lostquery">查询</el-button>
			</el-col>
			<el-col :span="8"
			        style="text-align: right;margin-right:-10px;">
				<el-button type="primary"
				           size="small"
				           @click='lostAdd'>新增</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="lostEdit">编辑</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="startlost">启用</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="stoplost">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table ref="multipleTable"
				          :data="tableData.dataList"
				          @selection-change="handleSelectionChange"
				          style="width: 100%">
					<el-table-column type="selection"
					                 width="55">
					</el-table-column>
					<el-table-column prop="typeCode"
					                 label="分类"
					                 :formatter="convertTypeCode">
					</el-table-column>
					<!--<el-table-column prop="typeName" label="分类显示名称">
									</el-table-column>-->
					<el-table-column prop="code"
					                 label="编码">
					</el-table-column>
					<el-table-column prop="name"
					                 label="显示名称">
					</el-table-column>
					<el-table-column prop="status"
					                 label="状态"
					                 :formatter="timeFormates">
					</el-table-column>
				</el-table>
				<el-pagination small
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogform">
			<el-form :model="dataFormModelData"
			         label-width="120px"
			         ref="datamodelForm"
			         :rules="modelRule">
				<el-form-item label="选择分类:"
				              prop="classList">
					<el-select size="small"
					           v-model="dataFormModelData.typeCode"
					           placeholder="选择分类">
						<el-option v-for="item in options" :label="item.label"
						           :value="item.value">
						</el-option>

					</el-select>
				</el-form-item>
				<el-form-item label="存储编码:"
				              prop="code">
					<el-input size="small"
					          v-model="dataFormModelData.code"></el-input>
				</el-form-item>
				<el-form-item label="显示名称:"
				              prop="name">
					<el-input size="small"
					          v-model="dataFormModelData.name"></el-input>
				</el-form-item>
				<el-form-item label="排序:"
				              prop="dispOrder">
					<el-input-number v-model="dataFormModelData.dispOrder"
					                 :min="1"
					                 :max="999999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button type="primary"
				           @click="lostsave">提交</el-button>
				<el-button @click="dialogform = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
  data() {
    return {
      typeCovert: {
        by: "保养去向",
        bx: "保险去向"
      },
      dialogform: false,
      //页码数
      CurentPage: 1,
      page: this.page,
      //分组数据
      tableData: {
        total: 0,
        dataList: []
      },
      selectvalue: "", //流失选择框的选择值
      options: [
        {
          value: "bx",
          label: "保险去向"
        },
        {
          value: "by",
          label: "保养去向"
        }
      ],
      dialogform: false,
      //表单初始值
      emptyData: {
        id: "",
        typeCode: "", //
        code: "", //存储编码
        name: "", //显示名称
        dispOrder: "", //排序
        status: "1"
      },
      //表单数据
      dataFormModelData: {
        id: "",
        typeCode: "",
        code: "",
        name: "",
        dispOrder: "",
        status: "1"
      },
      //校验规则：
      modelRule: {
        typeCode: [
          {
            required: true,
            message: "请选择分类",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入显示名称",
            trigger: "blur"
          }
        ]
      },
      inputsearch: "",
      formLabelWidth: "120px",
      selectarr: []
    };
  },
  methods: {
    //流失方向转换
    convertTypeCode: function(row, column) {
      return this.$data.typeCovert[row.typeCode];
    },
    handleCurrentChange: function(currentPage) {
      debugger;
      this.$data.CurentPage = currentPage;
      this.lostquery();
    },
    //查询
    lostquery: function() {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/loss/page", //url
        params: {
          //发送的参数
          code: this.$data.inputsearch, //输入框
          typeCode: this.$data.selectvalue, //分类
          start: this.$data.CurentPage, //页码
          limit: this.$data.page.pageSize //每页的数量
        }
      }).then(
        function(resp) {
          debugger;
          resp.data.total = parseInt(resp.data.total);
          // es5写法
          this.$data.tableData = resp.data;
        },
        function(error) {
          // error
        }
      );
    },
    //新增
    lostAdd: function() {
      this.$data.dataRoleFormData = Object.assign(
        this.$data.dataFormModelData,
        this.$data.emptyData
      );
      this.$data.dialogform = true;
    },
    //保存
    lostsave: function() {
      this.$refs.datamodelForm.validate(
        function(valid) {
          if (valid) {
            this.$http
              .post(
                this.API_ROOT + "/crm/loss/save",
                this.$data.dataFormModelData
              )
              .then(
                resp => {
                  debugger;
                  if (resp.data.success) {
                    debugger;
                    this.$message(resp.data.msg);
                    this.lostquery();
                    this.$data.dialogform = false;
                  } else {
                    this.$message.error(resp.data.msg);
                  }
                },
                resp => {}
              );
          }
          return false;
        }.bind(this)
      );
    },
    //编辑
    lostEdit: function() {
      if (this.$data.selectarr.length == 1) {
        debugger;
        this.$http({
          method: "GET",
          url: this.API_ROOT + "/crm/loss/info", //url
          params: {
            //发送的参数
            id: this.$data.selectarr[0].id //查询条件
          }
        }).then(
          function(resp) {
            this.$data.dialogform = true;
            this.$data.dataFormModelData = resp.data.data;
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择数据");
      }
    },
    //启用
    startlost: function() {
      if (this.$data.selectarr.length == 1) {
        debugger;
        this.$http({
          method: "GET",
          url: this.API_ROOT + "/crm/loss/start", //url
          params: {
            //发送的参数
            id: this.$data.selectarr[0].id //查询条件
          }
        }).then(
          function(resp) {
            this.$message(resp.data.msg);
            this.lostquery();
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择数据");
      }
    },
    //停用
    stoplost: function() {
      if (this.$data.selectarr.length == 1) {
        debugger;
        this.$http({
          method: "GET",
          url: this.API_ROOT + "/crm/loss/stop", //url
          params: {
            //发送的参数
            id: this.$data.selectarr[0].id //查询条件
          }
        }).then(
          function(resp) {
            this.$message(resp.data.msg);
            this.lostquery();
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择数据");
      }
    },
    handleSelectionChange: function(value) {
      this.$data.selectarr = value;
      if (this.$data.selectarr.length > 1) {
        this.$message.error("请选择一条数据");
      }
    },
    timeFormates: function(row, column) {
      if (row.status == 0) return "已停用";
      return "已启用";
    }
  },
  created: function() {
    this.lostquery();
  }
};
</script>

<style>

</style>